<template>
  <div class="collect">
    <div class="collect-header">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="collect-box">
      <!-- 左侧分类 -->
      <div class="collect-box-classify">
        <div class="collect-box-classify-title">
          <div
            v-for="(classify, index) in collectClassify"
            :key="index"
            :class="[
              'collect-box-classify-title-name',
              collectClassifyIndex == classify.id
                ? 'collect-box-classify-title-name-active'
                : '',
            ]"
            @click="onCollectClassifyTitle(classify)"
          >
            {{ classify.title }}
          </div>
        </div>
        <!-- 我的产品 -->
        <div
          class="collect-box-classify-product"
          v-if="collectClassifyIndex == 1"
        >
          <el-menu unique-opened class="el-menu-vertical-demo">
            <el-submenu
              :index="productCalssify.usper_title + productCalssify.id"
              v-for="(
                productCalssify, productIdx
              ) in collectProductCalssifyData"
              :key="productIdx"
            >
              <template slot="title">
                <span>{{ productCalssify.usper_title }}</span>
              </template>
              <el-menu-item-group
                v-for="(productChildren, idx) in productCalssify.children"
                :key="idx"
              >
                <template v-if="productChildren.children">
                  <el-submenu
                    :index="productChildren.usper_title + productChildren.id"
                  >
                    <template slot="title">{{
                      productChildren.usper_title
                    }}</template>
                    <el-menu-item
                      :index="children.usper_title + children.id"
                      v-for="(children, childIdx) in productChildren.children"
                      :key="childIdx"
                      @click="onChildrenProductClassify(children)"
                      >{{ children.usper_title }}</el-menu-item
                    >
                  </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item :index="productChildren.usper_title">{{
                    productChildren.usper_title
                  }}</el-menu-item>
                </template>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <!-- 我的素材 -->
        <div
          class="collect-box-classify-material"
          v-else-if="collectClassifyIndex == 2"
        >
          <el-menu class="el-menu-vertical-demo">
            <!-- <el-menu-item
              :index="material.title"
              v-for="(material, index) in materialData"
              :key="index"
            >
              <span slot="title">{{ material.title }}</span>
            </el-menu-item> -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-folder-opened"></i>
                <span>全部文件</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="material.title"
                  v-for="(material, index) in materialData"
                  :key="index"
                  @click="onMaterialId(material.id)"
                >
                  <i class="el-icon-folder"></i>
                  {{ material.title }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <!-- 主要内容 -->
      <div class="collect-box-content">
        <CollectProduct
          ref="collectProductRef"
          v-show="collectClassifyIndex == 1"
          :parentId="productClassifyId"
        />
        <CollectMaterial
          :materialList="materialData"
          :fileId="fileId"
          ref="collectMaterialRef"
          v-show="collectClassifyIndex == 2"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import CollectProduct from './collect-product.vue';
import CollectMaterial from './collect-material.vue';
import Collect from '@/api/collect';
import Way from '@/utils/way';

export default {
  name: 'collectIndex',
  components: { Breadcrumb, CollectProduct, CollectMaterial },
  props: {},
  data() {
    return {
      headerTitle: ['定制产品', '我的收藏'],
      collectClassify: [
        { title: '我的产品', id: 1 },
        { title: '我的素材', id: 2 },
      ],
      collectClassifyIndex: 1,
      collectProductCalssifyData: [], // 我的产品分类
      productClassifyId: null, // 产品分类id
      materialData: [], // 文件夹列表
      fileId: -1, // 文件夹id
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getProductClassify();
    this.getMaterialFolder();
  },
  methods: {
    // 分类切换
    onCollectClassifyTitle(item) {
      this.collectClassifyIndex = item.id;
    },
    // 获取产品分类
    getProductClassify() {
      const that = this;
      Collect.getCollectCategories().then((res) => {
        if (res.code == 200) {
          that.collectProductCalssifyData = res.data;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 文件夹列表
    getMaterialFolder() {
      const that = this;
      Collect.getMaterialFolder().then((res) => {
        let rows = res.data.rows;
        rows.forEach((op) => {
          op.isShow = false;
        });
        if (res.code == 200) {
          console.log(res);
          that.materialData = rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 我的产品分类点击事件
    onChildrenProductClassify(item) {
      this.productClassifyId = item.id;
    },

    // 我的素材文件点击事件
    onMaterialId(id) {
      this.fileId = id;
      this.$nextTick(() => {
        this.$refs.collectMaterialRef.getCollectMaterialList();
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.el-menu {
  border: unset;
}
.el-menu-item {
  min-width: unset;
}
.collect {
  .collect-header {
    padding: 10px 0;
  }
  .collect-box {
    display: flex;

    // 左侧分类
    .collect-box-classify {
      margin-right: 24px;
      width: 180px;

      .collect-box-classify-title {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ebebeb;
        font-size: 16px;
        height: 50px;
        line-height: 50px;

        .collect-box-classify-title-name {
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
        .collect-box-classify-title-name-active {
          border-bottom: 2px solid #666;
          font-weight: 700;
        }
      }
    }
    // 主要内容
    .collect-box-content {
      flex: 1;
    }
  }
}
</style>
